<script>
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex';

export default {
  name: 'count_component',
  data() {
    return {
      number: 1,
    }
  },
  methods: {
    ...mapMutations('count', {increment: 'INCREMENT', decrement: 'DECREMENT'}),
    ...mapActions('count', ['incrementIfOdd', 'incrementSecondLater'])
  },
  computed: {
    ...mapState('count', ['sum']),
    ...mapState('person', ['personList']),
    ...mapGetters('count', ['afterComputed'])
  },
  beforeDestroy() {
    console.log('count_component 被销毁')
  },
  mounted() {
    console.log('count_component 被创建')
  }
}
</script>

<template>
  <div >
    <div>当前总和为{{ sum }}</div>
    <div>加工后{{ afterComputed }}</div>
    <div >
      <!-- v-model.number 直接将接收到的参数转化为数字 -->
      <select v-model.number="number">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button @click="increment(number)">+</button>
      <button @click="decrement(number)">-</button>
      <button @click="incrementIfOdd(number)">总数为奇数执行加运算</button>
      <button @click="incrementSecondLater(number)">1s后执行加运算</button>
    </div>
    <div style="color: #59b2ee">Person组件的人数{{ personList.length }} </div>
  </div>
</template>

<style scoped>

</style>